<ng-container *ngIf="qrCodeURL && urlPaymentBrands">
  <app-base-info
    *ngIf="!loading"
    [allowEdit]="false"
    [totalHeight]="300"
    [firstSecondHeight]="140"
    [(firstColumns)]="URLColumns[0]"
    [(secondColumns)]="URLColumns[1]"
    [imgTpl]="qrCodeURlTpl"
  ></app-base-info>
</ng-container>

<div class="cil__empty-block"></div>

<ng-container *ngIf="qrCodeEMV && emvPaymentBrands">
  <app-base-info
    *ngIf="!loading"
    [allowEdit]="false"
    [totalHeight]="300"
    [firstSecondHeight]="140"
    [(firstColumns)]="EMVColumns[0]"
    [imgTpl]="qrCodeEMVTpl"
  ></app-base-info>
</ng-container>

<ng-container *ngIf="!(qrCodeURL && urlPaymentBrands) && !(qrCodeEMV && emvPaymentBrands)">
  <div class="cil__no-qrcode">
    <p style="text-align: center">{{'GENERAL.INFO.NONE' | i18n}}</p>
  </div>
</ng-container>

<ng-template #qrCodeURlTpl>
  <div nz-row class="py-lg bg-white" *ngIf="qrCodeURL" style="height: 300px; display: flex;">
    <div nz-col [nzSpan]="24" class="d-flex justify-content-center align-items-center">
      <qrcode *ngIf="qrCodeURL"
        [qrdata]="qrCodeURL"
        [size]="256" [level]="'M'"></qrcode>
    </div>
  </div>
</ng-template>

<ng-template #qrCodeEMVTpl>
  <div nz-row class="py-lg bg-white" *ngIf="qrCodeEMV" style="height: 300px; display: flex;">
    <div nz-col [nzSpan]="24" class="d-flex justify-content-center align-items-center">
      <qrcode *ngIf="qrCodeEMV"
        [qrdata]="qrCodeEMV"
        [size]="256" [level]="'M'"></qrcode>
    </div>
  </div>
</ng-template>

<ng-template #qrBrand>
  <ng-container *ngFor="let item of terminal.qr.urlPaymentBrands">
    <img class="cil__terminal-brand" *ngIf="item === 'ALP'" src="assets/images/centaur/logo/Alipay-logo.png" />
    <img class="cil__terminal-brand" *ngIf="item === 'WXP'"  src="assets/images/centaur/logo/weixin-logo.png" />
    <img class="cil__terminal-brand" *ngIf="item === 'UPI'" src="assets/images/centaur/logo/upi-logo.png" />
  </ng-container>
</ng-template>

<ng-template #emvBrand>
  <ng-container *ngFor="let item of terminal.qr.emvPaymentBrands">
    <img class="cil__terminal-brand" *ngIf="item === 'ALP'" src="assets/images/centaur/logo/Alipay-logo.png" />
    <img class="cil__terminal-brand" *ngIf="item === 'WXP'"  src="assets/images/centaur/logo/weixin-logo.png" />
    <img class="cil__terminal-brand" *ngIf="item === 'UPI'" src="assets/images/centaur/logo/upi-logo.png" />
  </ng-container>
</ng-template>